<template>
<view >
  <uniSearchBar placeholder="搜索二批" @input="querysCustomer"></uniSearchBar>
    <view v-for="item in scustomerList"  @tap="tabSelect(item)">
      <div  class="list_item" :class="item.isActive ? 'isActive' : ''" :key="item">
        <!-- 位置信息 开始-->
        <div class="place_info">
          <div class="flex flex-row">
            <div><checkbox value="cb" @change="setHistory" :checked="item.isSelect" /></div>
            <!-- 客户编码 -->
            <div>
              <div>
                <span>二批编码：</span><span>{{ item.code }}</span>
              </div>
              <!-- 客户名称 -->
              <div>
                <span>二批名称：</span><span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <!-- 客户地址  -->
        </div>
      </div>
    </view>
  <end-temp v-if="end"></end-temp>
  <view style="height: 100rpx;width: 100%"></view>
  <view class="bottom"><button @click="subscUstomerList">确认</button></view>
</view>
</template>

<script>
import {getbasCustomerList} from "@/service/api/shopping";
import uniSearchBar from "../../components/uniSearchBar";
import endTemp from "../../components/endTemp";

export default {
  name: "scustomerList",
  components: {uniSearchBar, endTemp},
  data(){
    return{
      query:{
        size: 20,
        page: 1,
        type: 3,
        keyword: ''
      },
      scustomerList:[],
      selectList: [],
      end: false,
      history:{}
    }
  },
  created() {
    this.onGet()
  },

  onReachBottom(){
    if (this.end){return}
    this.query.page += 1
    this.onGet()
  },
  methods:{
    init(){
      this.query.page = 1
      this.scustomerList = []
      this.end = false
    },
    onGet(){
      uni.showLoading()
      getbasCustomerList(this.query).catch(res=>{
        if (res.content.length === 0){
          this.end = true
        }
        const scustomerList = res.content.map(item=>{
          return {
            id:item.id,
            code: item.code,
            name: item.name,
            isSelect: this.selectList.includes(item.id)
          }
        })
        this.scustomerList = [...this.scustomerList,...scustomerList]
        uni.hideLoading()
      })
    },
    tabSelect(val){
      val.isSelect  = !val.isSelect
      if (val.isSelect){
        this.history[val.id] = val
      }
      console.log(this.history)
      // console.log(item)
    },
    querysCustomer(val){
      this.selectList = Array.from(new Set([...this.selectList,...this.scustomerList.map(item=>{if(item.isSelect){return item.id}}).filter(ite => typeof ite !== 'undefined') ]))
      this.query.keyword = val
      this.init()
      this.onGet()
    },
    subscUstomerList(){
      const app =getApp()
      app.globalData.scustomerList =
      Array.from(new Set([...this.selectList,...this.scustomerList.map(item=>{if(item.isSelect){return item.id}}).filter(ite => typeof ite !== 'undefined') ])).map(item=>this.history[item])
      uni.navigateBack(1)
    },
    setHistory(val){
      console.log('1111')
      if (val.isSelect){
        this.history[val.id] = val
      }
    }

  }
}

</script>

<style lang="scss" scoped>
.list_item {
  padding: 20rpx 15rpx;
  display: flex;
  border-bottom: 1px solid #ddd;
.place_info {
  flex: 1;
}
.op_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
.btn_op {
  padding: 0rpx 30rpx;
  font-size: 24rpx;
  margin: 6rpx 0;
}
}
}
.bottom{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  box-shadow: rgba(200,200,200,0.30) 0 0 2px 0;
}
</style>
